<template>
  <div id="assets-library-html-plane">
    <div class="cards">
      <n-card
        size="small"
        hoverable
        v-for="item in allList"
        :key="item.key"
        @dblclick="addToScene(item)"
        draggable="true"
        @dragstart="dragStart(item)"
        @dragend="dragEnd"
      >
        <template #cover>
          <img :src="item.image" :alt="item.key" draggable="false" />
        </template>
        <n-tooltip placement="bottom" trigger="hover">
          <template #trigger> {{ item.name.value || item.name }}</template>
          <span> {{ item.name.value || item.name }} </span>
        </n-tooltip>
      </n-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRaw } from "vue";
import { useDragStore } from "@/store/modules/drag";
import { screenToWorld } from "@/utils/common/scenes";
import { AddObjectCommand } from "@/core/commands/AddObjectCommand";
import { HtmlPlaneConverter } from "@/core/objects/HtmlPlane";
import { Billboard } from "@/core/objects/BillBoard";
import ButtonImg from "@/assets/images/button_model.png";

const allList = [
  // {
  //   type: "HtmlSprite",
  //   key: "Factory equipment",
  //   image: "/static/images/assetsLibrary/htmlPlane/factoryEquipment.png",
  //   name: "工厂设备",
  //   html: "/static/resource/htmlPlane/factoryEquipment.html",
  // },
  {
    type: "HtmlPlane",
    key: "Button",
    image: ButtonImg,
    name: "按钮",
    // htmlContent: `<div id="button-${Date.now()}" class="button-plane"></div>`,
    // config: {
    //   text: "按钮",
    //   width: 80,
    //   height: 36,
    //   backgroundColor: "#409eff",
    //   color: "#fff",
    //   fontSize: 14,
    //   borderRadius: 4,
    // },
  },
  // {
  //   type: "Billboard",
  //   key: "StandardBillboard",
  //   image: ButtonImg,
  //   name: "广告牌",
  //   config: {
  //     width: 200,
  //     height: 100,
  //     content: "广告牌内容",
  //     fontSize: 16,
  //     color: "#ffffff",
  //     backgroundColor: "#409eff",
  //     borderRadius: 4,
  //   },
  // },
];

//双击添加至场景..
function addToScene(item, position?) {
  const config = {};
  //如果htmlSprite
  if (item.type === "HtmlSprite") {
    config["url"] = item.html;
    config["isSprite"] = true;
  }
  if (item.type === "HtmlPlane") {
    const defaultConfig = {
      type: "HtmlPlane",
      key: "Button",
      image: ButtonImg,
      name: "按钮",
      htmlContent: `<div id="button-${Date.now()}" class="button-plane"></div>`,
      config: {
        text: "按钮",
        width: 80,
        height: 36,
        backgroundColor: "#409eff",
        color: "#fff",
        fontSize: 14,
        borderRadius: 4,
      },
    };

    config["htmlContent"] = defaultConfig.htmlContent;
    config["config"] = defaultConfig.config;
    config["isSprite"] = true;
  }

  if (item.type === "Billboard") {
    const defaultConfig = {
      type: "Billboard",
      key: "StandardBillboard",
      image: ButtonImg,
      name: "广告牌",
      config: {
        width: 200,
        height: 100,
        content: "广告牌内容",
        fontSize: 16, // 字体大小
        color: "#ffffff", // 字体颜色
        backgroundColor: "#409eff", // 背景颜色
        borderRadius: 4, // 圆角半径
      },
    };

    const billboard = new Billboard(item.config);

    if (!position) {
      position = [0, 0, 0];
    }

    billboard.position.fromArray(position);
    billboard.name = item.name;

    window.editor.execute(
      new AddObjectCommand(billboard),
      `Add Billboard: ${billboard.name}`
    );
    return;
  }
  HtmlPlaneConverter.getInstance()
    .loadAsync(config)
    .then((htmlPlaneObj) => {
      if (!position) {
        position = [0, 0, 0];
      }
      htmlPlaneObj.position.fromArray(position);
      htmlPlaneObj.scale.set(0.02, 0.02, 0.2);
      htmlPlaneObj.name = item.name.value || item.name;
      console.log(htmlPlaneObj);
      window.editor.execute(
        new AddObjectCommand(htmlPlaneObj),
        `Add Billboard: ${htmlPlaneObj.name}`
      );
    });
}

// 开始拖拽事件
const dragStore = useDragStore();

function dragStart(item) {
  dragStore.setData(item);
}

function dragEnd() {
  if (
    dragStore.getActionTarget !== "addToScene" ||
    dragStore.endArea !== "Scene"
  )
    return;

  const position = screenToWorld(
    dragStore.endPosition.x,
    dragStore.endPosition.y
  );

  addToScene(dragStore.getData, position.toArray());

  dragStore.setActionTarget("");
}
</script>

<style scoped lang="less">
#assets-library-html-plane {
  overflow-x: hidden;

  .cards {
    padding: 0 10px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px 8px;
  }

  .n-card {
    cursor: pointer;

    .n-image {
      display: block;
    }

    :deep(.n-card-cover) {
      img {
        height: 85px;
      }
    }

    :deep(.n-card__content) {
      padding: 3px 0;
      font-size: 13px;
      text-align: center;
    }
  }
}
</style>
